<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>文章列表</span>
      </div>
      <!-- 搜索区域 -->
      <div class="search-box">
        <el-form :inline="true" :model="q">
          <el-form-item label="文章分类">
            <el-select
              v-model="q.cate_id"
              placeholder="请选择分类"
              size="small"
            >
              <el-option
                v-for="item in cateList"
                :key="item.id"
                :label="item.cate_name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发布状态" style="margin-left: 15px">
            <el-select v-model="q.state" placeholder="请选择状态" size="small">
              <el-option label="已发布" value="已发布"></el-option>
              <el-option label="草稿" value="草稿"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="sift"
              >筛选</el-button
            >
            <el-button type="info" size="small" @click="dataReset"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <!-- 发表文章的按钮 -->
        <el-button
          type="primary"
          size="small"
          class="btn-pub"
          @click="dialogVisible = true"
          >发表文章</el-button
        >
      </div>
      <!-- 文章表格区域 -->
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="title" label="文章标题" width="180">
          <template #default="scope">
            <!-- #default="scope" -->
            <el-link
              type="primary"
              @click="preview(scope)"
              v-text="scope.row.title"
              >标题</el-link
            >
          </template>
        </el-table-column>
        <el-table-column prop="cate_name" label="分类" width="180">
        </el-table-column>
        <el-table-column prop="pub_date" label="发表时间"> </el-table-column>
        <el-table-column prop="state" label="状态"> </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <!-- #default="scope" -->
            <el-button type="danger" size="mini" @click="del(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="q.pagenum"
        :page-sizes="[2, 3, 5, 10]"
        :page-size="q.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 发表文章的对话框 -->
    <el-dialog
      title="发表文章"
      :visible="dialogVisible"
      width="30%"
      @open="openPublish"
      @close="closePublish"
      fullscreen
    >
      <el-form
        :rules="rules"
        ref="ruleForm"
        :model="publishData"
        label-width="80px"
      >
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="publishData.title"></el-input>
        </el-form-item>
        <el-form-item label="文章分类" prop="cate_id">
          <el-select
            v-model="publishData.cate_id"
            placeholder="请选择分类"
            style="width: 100%"
          >
            <el-option
              v-for="item in cateList"
              :key="item.id"
              :label="item.cate_name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文章内容" prop="content">
          <!-- 富文本编辑器 -->
          <quill-editor v-model="publishData.content"> </quill-editor>
        </el-form-item>
        <el-form-item label="文章封面" prop="cover_img">
          <el-image
            style="width: 400px; height: 400px"
            ref="imgRef"
            :src="img"
          ></el-image>
          <!-- 原生文件选择框 -->
          <input
            type="file"
            style="display: none"
            ref="fileRef"
            accept="image/*"
            @change="fileChange"
          />
          <br />
          <el-link type="primary" @click="uploadImg">+ 选择图片</el-link>
          <!--  上传组件 -->
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addContent">发布</el-button>
        <el-button type="info" @click="draftContent">存为草稿</el-button>
      </span>
    </el-dialog>

    <!-- 查看文章详情的对话框 -->
    <el-dialog
      title="文章预览"
      :visible="previewDialogVisible"
      width="70%"
      @close="closePreviewDialog"
      @open="openPreviewDialog"
    >
      <el-row type="flex" justify="center">
        <el-col :span="24">
          <div style="text-align: center" v-text="previewData.title">标题</div>
        </el-col>
      </el-row>
      <el-row
        type="flex"
        justify="start"
        style="border-bottom: 1px #dcdfe6 solid; padding: 20px 0 25px 0"
      >
        <!-- 文章详细信息 -->
        <el-col :span="13">
          <el-row type="flex" justify="start">
            <el-col :span="24" style="font-size: 12px">
              作者：
              <span
                v-text="previewData.username"
                style="padding-right: 20px"
              ></span>

              发布时间：
              <span
                v-text="previewData.pub_date"
                style="padding-right: 20px"
              ></span>

              所属分类：
              <span
                v-text="previewData.cate_name"
                style="padding-right: 20px"
              ></span>

              状态：
              <span
                v-text="previewData.state"
                style="padding-right: 20px"
              ></span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row type="flex" justify="start" style="padding-top: 25px">
        <el-col :span="24">
          <el-image
            style="width: 400px; height: 400px"
            :src="previewData.cover_img"
          ></el-image>
        </el-col>
      </el-row>
      <el-row type="flex" justify="start" style="padding-top: 25px">
        <el-col :span="24" v-html="previewData.content">正文 </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
// 引入日期处理插件dayjs
import * as dayjs from 'dayjs'

import img from '@/assets/images/cover.jpg'

export default {
  name: 'ArtList',
  data () {
    return {
      // img
      img: img,
      // 查询参数对象
      q: {
        // 当前是第几页
        pagenum: 1,
        // 每页展示多少条
        pagesize: 2,
        cate_id: '',
        state: ''
      },
      // 当前的页数
      page: 1,
      //  {
      //     date: '2016-05-02',
      //     name: '王小虎',
      //     address: '上海市普陀区金沙江路 1518 弄'
      //   },
      //   {
      //     date: '2016-05-04',
      //     name: '王小虎',
      //     address: '上海市普陀区金沙江路 1517 弄'
      //   },
      //   {
      //     date: '2016-05-01',
      //     name: '王小虎',
      //     address: '上海市普陀区金沙江路 1519 弄'
      //   },
      //   {
      //     date: '2016-05-03',
      //     name: '王小虎',
      //     address: '上海市普陀区金沙江路 1516 弄'
      //   }
      tableData: [],
      // 总数据条数
      total: 0,
      // 文章分类列表
      cateList: [],
      // 预览dialog对话框打开
      previewDialogVisible: false,
      // 添加dialog对话框打开
      dialogVisible: false,
      // 预览的数据
      previewData: {},

      // title	是	string	文章标题	1-30 个字符
      // cate_id	是	int	所属分类 Id	整数，最小值为 1
      // content	是	string	文章内容	非空的字符串
      // state	是	string	文章的发布状态	可选值为：已发布、草稿
      // cover_img	是	blob二进制	文章封面	只能是图片文件
      // 添加文章保存数据的对象
      publishData: {
        title: '',
        cate_id: '',
        content: '',
        cover_img: null,
        state: ''
      },
      // 表单验证
      rules: {
        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
        cate_id: [
          {
            required: true,
            message: '分类不能为空',
            trigger: ['blur', 'change']
          }
        ],
        content: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
        cover_img: [
          { required: true, message: '图片不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 获取表格所有数据
    async initListData () {
      const { data: res } = await this.$http.get(
        '/my/article/list?pagenum=' +
          this.q.pagenum +
          '&' +
          'pagesize=' +
          this.q.pagesize +
          '&' +
          'cate_id=' +
          this.q.cate_id +
          '&' +
          'state=' +
          this.q.state
      )

      // 将数据中的时间用dayjs解析成人能看懂的时间
      for (const item of res.data) {
        item.pub_date = dayjs(item.pub_date).format('YYYY-MM-DD HH-mm-ss')
      }
      // 保存表格数据和数据总条数
      this.tableData = res.data
      this.total = res.total

      // // 赋值总共多少页
      // this.page = parseInt(res.total / this.q.pagesize)
      // //  总数据和每页的数据取余如果大于0代表，还有一些数据没有填满一页,所以页数加一
      // if (res.total % this.q.pagesize > 0) {
      //   this.page += 1
      // }
    },
    // 获取文章分类列表
    async initCateList () {
      const { data: res } = await this.$http.get('/my/cate/list')
      console.log(res)
      this.cateList = res.data
    },
    // 每页条数发生变化执行
    handleSizeChange (pagesize) {
      this.q.pagesize = pagesize
      this.initListData()
    },
    // 当前页数发生变化执行
    handleCurrentChange (pagenum) {
      this.q.pagenum = pagenum
      this.initListData()
    },

    // 删除一条数据
    del (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await this.$http.delete('/my/article/info?id=' + id)
          console.log(res)
          this.initListData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 筛选
    sift () {
      this.initListData()
    },
    // 重置
    dataReset () {
      this.q.cate_id = this.q.state = ''
      this.initListData()
    },
    // 预览
    async preview (scope) {
      // 获取要预览的数据
      const { data: res } = await this.$http.get(
        '/my/article/info?id=' + scope.row.id
      )
      console.log(res)
      // 让得到的图片链接完整
      res.data.cover_img =
        'http://big-event-vue-api-t.itheima.net' + res.data.cover_img
      // 处理得到的时间
      res.data.pub_date = dayjs(res.data.pub_date).format('YYYY-MM-DD HH-mm-ss')
      this.previewData = res.data
      this.previewDialogVisible = true
    },
    // // 打开预览弹窗，获取并回显数据
    openPreviewDialog () {},
    // 关闭预览弹窗执行
    closePreviewDialog () {
      this.previewDialogVisible = false
    },
    // 发布文章请求
    setContent () {
      // 兜底校验
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          // 因为上传的数据里面包含一个对象（图片的），所以需要将数据用formdata包装后在上传，
          // 否则会出现图片那个对象识别不到的问题
          const fd = new FormData()
          for (const key in this.publishData) {
            fd.append(key, this.publishData[key])
          }
          await this.$http.post('/my/article/add', fd)
          // 刷新数据
          this.initListData()
          this.$message.success('添加成功！')
          // 关闭弹窗
          this.dialogVisible = false
        } else {
          return false
        }
      })
    },
    //  发布文章
    addContent () {
      this.publishData.state = '已发布'
      this.setContent()
    },
    // 存为草稿
    draftContent () {
      this.publishData.state = '草稿'
      this.setContent()
    },
    // 打开添加文章弹框
    openPublish () {},
    // 关闭添加文章弹窗
    closePublish () {
      // 弹窗关闭，将数据复位
      this.$refs.ruleForm.resetFields()
      this.publishData = {
        title: '',
        cate_id: '',
        content: '',
        cover_img: null,
        state: ''
      }
      this.img = img
      this.dialogVisible = false
    },

    // 选择图片
    uploadImg () {
      this.$refs.fileRef.click()
    },
    // 文件选择框中的内容变化就执行
    fileChange (e) {
      // 获取选择的文件
      const files = e.target.files
      if (files.length > 0) {
        // 保存到数据项
        this.publishData.cover_img = files[0]
        // 获取图片的链接，预览图片
        const url = URL.createObjectURL(files[0])
        // 预览的封面
        this.img = url
      }
    }
  },
  // 页面打开渲染数据
  created () {
    // 获取所有文章数据
    this.initListData()
    // 页面加载获取文章分类列表
    this.initCateList()
  }
}
</script>

<style lang="less" scoped>
.search-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .btn-pub {
    margin-top: 5px;
  }
}
// 在 vue 中，想要改变子组件的样式需要使用样式穿透，less 中，样式穿透使用的是 /deep/
/deep/ .ql-editor {
  min-height: 300px;
}
// 设置图片封面的宽高
.cover-img {
  width: 400px;
  height: 280px;
  object-fit: cover;
}
</style>
